<template>
  <div class="app-container">
    <el-table
      v-loading="listLoading"
      :data="list"
      fit
      highlight-current-row
      style="width: 100%"
    >
      <!-- <el-table-column align="center" label="ID" width="220">
        <template slot-scope="{ row }">
          <span>{{ row._id }}</span>
        </template>
      </el-table-column> -->
      <el-table-column width="120" align="center" label="所属小区">
        <template >
          <span>智慧小区</span>
        </template>
      </el-table-column>
      
      <el-table-column width="100" align="center" label="楼栋号">
        <template slot-scope="{ row }">
          <span>{{ row.building }}</span>
        </template>
      </el-table-column>

      <el-table-column width="100" align="center" label="房间号">
        <template slot-scope="{ row }">
          <span>{{ row.room }}</span>
        </template>
      </el-table-column>

      <el-table-column min-width="100" align="center" label="业主身份证">
        <template slot-scope="{ row }">
          <template v-if="row.edit">
            <el-input v-model="row.newCard" class="edit-input" size="small" />
            <el-button
              class="cancel-btn"
              size="small"
              icon="el-icon-refresh"
              type="warning"
              @click="cancelEdit(row)"
            >
              取消
            </el-button>
          </template>
          <span v-else>{{ row.card }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" width="130">
        <template slot-scope="{ row }">
          <el-button
            v-if="row.edit"
            type="success"
            size="small"
            icon="el-icon-circle-check"
            @click="confirmEdit(row)"
          >
            确认
          </el-button>
          <el-button
            v-else
            type="primary"
            size="small"
            icon="el-icon-edit"
            @click="clickHandle(row)"
          >
            更换业主
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="listQuery.count > 0"
      :total="listQuery.count"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />
  </div>
</template>

<script>
import Pagination from './Pagination/index'
export default {
  name: 'InlineEditTable',
  components: { Pagination },
  data() {
    return {
      listLoading: false
    }
  },
  computed: {
    list() {
      return this.$store.state.house.list
    },
    listQuery() {
      return this.$store.state.house.listQuery
    }
  },
  methods: {
    async getList(data) {
      this.listLoading = true
      const obj = Object.assign({}, this.listQuery, data)
      this.$store.commit('house/SET_LISTQUERY', obj)
      await this.$store.dispatch('house/getHouse')
      this.listLoading = false
    },
    clickHandle(row) {
      row.edit = true
      this.$store.commit('house/CHANGE_LIST', row)
    },
    cancelEdit(row, val) {
      row.edit = false
      this.$store.commit('house/CHANGE_LIST', row)
      this.$message({
        message: '取消更换',
        type: 'warning'
      })
    },
    confirmEdit(row) {
      row.edit = false
      row.card = row.newCard
      this.$store.commit('house/CHANGE_LIST', row)
      this.$store.dispatch('house/changeCard', { _id: row._id, card: row.card })
      this.$message({
        message: '更换业主成功！',
        type: 'success'
      })
    }
  }
}
</script>

<style scoped>
.edit-input {
  padding-right: 110px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>
